<template>
  <view class="page-wraper">
    <customNav
      title1="首页"
      bgColor="#4E6ECC"
      :backIcon="false"
      backIconColor="white"
    ></customNav>
    <addressSearch
      ref="setAddres"
      @addressBtn="addressBtn"
      @searchBtn="searchBtn"
	  @searchClick="searchClick"
      v-if="isShowAddressSearch"
      :isShowAddress="false"
	  :disabled="true"
    >
    </addressSearch>
    <view class="background">
      <!-- <cssArcBackground bgColor="#F2F3F5" height="100" /> -->

      <view class="content-view">
        <view class="swiperImageViewClass">
          <view class="pad28">
            <view class="contentViewBox">
              <view class="swiper_box_banner_box">
                <swiper
                  circular="false"
                  vertical="false"
                  display-multiple-items="1"
                  :autoplay="true"
                  :vertical="false"
                  style="border-radius: 20rpx"
                >
                  <swiper-item
                    v-for="(item, index) in rotationChartList"
                    :key="index"
                    @click="$disableDoubleClick(swiperClick, 'onoff', item)"
                    style="border-radius: 20rpx"
                  >
                    <!-- 支付宝小程序需要添加view点击才能生效 -->
                    <!-- <view @click="swiperClick(item)"> -->
                    <!-- 注释当前swiper图片暂时无法展示，使用固定图片 -->
                    <image
                      class="imageSwiperClass"
                      mode="aspectFill"
                      :src="item.cover_url"
                    ></image>
                    <!-- </view> -->
                  </swiper-item>
                </swiper>
              </view>
              <view class="swiper-item-text swiper-item-absolute"
                >猜你喜欢TOP5</view
              >
            </view>
            <view class="view-box" style="margin-top: 20px">
              <view
                class="view-item-imgae"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 5)"
              >
                <image
                  style="width: 66rpx"
                  src="@/static/logistics.png"
                  mode="widthFix"
                ></image>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-imgae"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 6)"
                ><image
                  style="width: 52rpx"
                  src="@/static/banking.png"
                  mode="widthFix"
                ></image>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-imgae"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 7)"
                ><image
                  style="width: 58rpx"
                  src="@/static/plug.png"
                  mode="widthFix"
                ></image>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-imgae"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 8)"
              >
                <image
                  style="width: 66rpx"
                  src="@/static/overseas.png"
                  mode="widthFix"
                ></image>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-imgae"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 9)"
              >
                <image
                  style="width: 54rpx"
                  src="@/static/assure_car.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>

            <view class="view-box" style="margin-top: 8rpx">
              <view
                class="view-item-text"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 5)"
              >
                <view class="view-text">物流服务</view>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-text"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 6)"
              >
                <view class="view-text">金融垫付</view>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-text"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 7)"
              >
                <view class="view-text">推广</view>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-text"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 8)"
              >
                <view class="view-text">海外开证</view>
              </view>
              <view style="width: 20px"></view>
              <view
                class="view-item-text"
                @click="$disableDoubleClick(homeClickFuc, 'onoff', 9)"
              >
                <view class="view-text">担保车</view>
              </view>
            </view>

            <view class="view-box">
              <view class="view-item-left">
                <view class="swiper-view-top">
                  <text class="swiper-text-top">{{ promotionTitle }}</text>
                  <text class="swiper-text-top__tag">限时</text>
                </view>
                <view class="swiper_box_2">
                  <swiper
                    circular="false"
                    display-multiple-items="1"
                    :autoplay="true"
                    :vertical="false"
                  >
                    <swiper-item
                      v-for="(item, index) in promotionList"
                      :key="index"
                      @click="
                        $disableDoubleClick(promotionClick, 'onoff', item)
                      "
                    >
                      <!-- 支付宝小程序需要添加view点击才能生效 -->
                      <!-- <view @click="swiperClick(item)"> -->
                      <!-- 注释当前swiper图片暂时无法展示，使用固定图片 -->
                      <!-- <image class="swiper_box_2" :src="item.cover_url"> -->

                      <!-- </image> -->
                      <!-- </view> -->

                      <!-- <view> -->
                      <view class="swiper-view-item-box-bottom">
                        <view class="swiper-text-item-bottom">{{
                          item.describe
                        }}</view>
                        <!-- <view class="swiper-text-item-bottom">{{item.name}}</view> -->
                      </view>
                      <image
                        :src="item.cover_url"
                        style="width: 150px; height: 80px"
                      />
                      <!-- <image src="@/static/home_car_example.png" mode="scaleToFill" style="width: 150px; height:75px"> -->
                      <!-- </view> -->
                    </swiper-item>
                  </swiper>
                </view>
              </view>

              <view class="view-item-right">
                <view
                  class="view-item-right__card"
                  @click="$disableDoubleClick(homeClickFuc, 'onoff', 2)"
                >
                  <view class="view-item-right__card__text">
                    <text class="view-item-right__card__text__title">新车</text>
                    <text class="view-item-right__card__text__subTitle"
                      >进入新车专区</text
                    >
                  </view>
                  <view style="flex: 1"></view>
                  <image
                    class="view-item-right__card__image"
                    src="@/static/new_car.png"
                  ></image>
                </view>
                <view style="height: 7px"></view>
                <view
                  class="view-item-right__card"
                  @click="$disableDoubleClick(homeClickFuc, 'onoff', 3)"
                >
                  <view class="view-item-right__card__text">
                    <text class="view-item-right__card__text__title"
                      >最新快报</text
                    >
                    <text class="view-item-right__card__text__subTitle"
                      >最新消息抢先知道</text
                    >
                  </view>
                  <view style="flex: 1"></view>
                  <image
                    class="view-item-right__card__image"
                    src="@/static/notice.png"
                  ></image>
                </view>
                <view style="height: 7px"></view>
                <view
                  class="view-item-right__card"
                  @click="$disableDoubleClick(homeClickFuc, 'onoff', 4)"
                >
                  <view class="view-item-right__card__text">
                    <text class="view-item-right__card__text__title"
                      >二手车</text
                    >
                    <text class="view-item-right__card__text__subTitle"
                      >进入二手车专区</text
                    >
                  </view>
                  <view style="flex: 1"></view>
                  <image
                    class="view-item-right__card__image"
                    src="@/static/secondhand_car.png"
                  ></image>
                </view>
                <!-- <view class="xincheViewClass" @click="$disableDoubleClick(homeClickFuc,'onoff',2)">
									<image class="xinche-image" src="@/static/new_car.png"></image>
									<view class="xincheText">新车</view>
								</view>
								<view class="kuaibao-ershou-box">
									<view class="kuaibaoView" @click="$disableDoubleClick(homeClickFuc,'onoff',3)">
										<image class="kuaibao-ershou-image kuaibao-image" src="@/static/notice.png"></image>
										<view class="kuaibaoText">快报</view>
									</view>
									<view class="ershoucheView" @click="$disableDoubleClick(homeClickFuc,'onoff',4)">
										<image class="kuaibao-ershou-image ershouche-image"
											src="@/static/secondhand_car.png"></image>
										<view class="ershoucheText">二手车</view>
									</view>
								</view> -->
              </view>
            </view>
          </view>

          <!-- <view class="line-5"></view> -->
          <view class="ms-box">
            <view class="ms-box__view">
              <view class="msg-view-box">
                <view class="message-text-title">站内消息</view>
              </view>
              <view v-for="(item, index) in stationMessageDa" :key="index">
                <view class="msg-item-box" @click="msgClick(item)">
                  <view class="msg-content-class">{{ item.title }}</view>
                  <image
                    class="msg-image-class"
                    mode="widthFix"
                    :src="item.cover_url"
                    v-if="item.cover_url"
                  ></image>
                </view>
                <view class="line"></view>
              </view>
            </view>
          </view>
          <view class="height100"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import customNav from "@/components/custom-nav/custom-nav.vue";
import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
import addressSearch from "@/components/addressSearch/addressSearch.vue";
import {
  getStationMessage,
  getRotationChart,
  bodyFunList,
  getPromotionList,
} from "@/api/home.js";
export default {
  components: {
    customNav,
    addressSearch,
    cssArcBackground,
  },
  data() {
    return {
      onoff: true, //防抖动的字段
      datalenght: 1,
      rotationChartList: [
        {
          id: "",
          cover_url: "", //图片链接
          url: "", //不为空时可以跳转
        },
      ],

      promotionList: [],
      promotionTitle: "",
      // carListData: [],
      stationMessageDa: [],
      isShowAddressSearch: true,
    };
  },
  onLoad() {
    // #ifdef MP-WEIXIN

    // #endif
    var that = this;
    //获取站内消息
    getStationMessage().then((res) => {
      if (res.code == 0) {
        that.stationMessageDa = res.data;
      } else {
        uni.showToast({
          title: res.message,
          icon: "none",
        });
      }
    });

    //获取轮播图
    getRotationChart().then((res) => {
      if (res.code == 0) {
        that.rotationChartList = res.data;
        that.datalenght = that.rotationChartList.length;
      } else {
        uni.showToast({
          title: res.message,
          icon: "none",
        });
      }
    });

    // 获取车源推广

    getPromotionList().then((res) => {
      if (res.code == 0) {
        this.promotionTitle = res.data.promotion_title;
        this.promotionList = res.data.result;
      }
    });
  },
  onShow() {
    try {
      this.$refs.setAddres.setAddres();
    } catch (e) {
      //TODO handle the exception
    }
  },
  methods: {
    msgClick(item) {
      this.$utils.log("打印点击item返回的数据" + JSON.stringify(item));
      uni.navigateTo({
        url:
          "/pages/home/stationMessage/stationMessage?content=" + item.content,
      });
    },
    homeClickFuc(inta) {
      this.$utils.log(inta);
      switch (inta + "") {
        case "1": {
          break;
        }
        case "2": {
          // uni.navigateTo({
          // 	url: '/main/home/newCar/newCar'
          // })
          uni.navigateTo({
            url: "/main/home/newCar/newCar",
          });
          break;
        }
        case "3": {
          uni.navigateTo({
            url: "/pages/home/notice/notice",
          });
          break;
        }
        case "4": {
          uni.navigateTo({
            url: "/secondhandCar/index",
          });
          break;
        }
        case "5": {
          uni.navigateTo({
            url: "/pages/home/logistics/logistics",
          });
          break;
        }
        case "6": {
          bodyFunList("financial_advances").then((res) => {
            if (res.data) {
              if (res.code == 0) {
                uni.navigateTo({
                  url:
                    "/pages/home/banking/banking?content=" + res.data.content,
                });
              }
            }
          });
          break;
        }
        case "7": {
          bodyFunList("promotion").then((res) => {
            if (res.data) {
              if (res.code == 0) {
                uni.navigateTo({
                  url: "/pages/home/plug/plug?content=" + res.data.content,
                });
              }
            }
          });
          break;
        }
        case "8": {
          bodyFunList("overseas_issuance").then((res) => {
            if (res.data) {
              if (res.code == 0) {
                uni.navigateTo({
                  url:
                    "/pages/home/overseas/overseas?content=" + res.data.content,
                });
              }
            }
          });
          break;
        }
        case "9": {
          bodyFunList("guarantee_vehicle").then((res) => {
            if (res.data) {
              if (res.code == 0) {
                uni.navigateTo({
                  url:
                    "/pages/home/guaranteeCar/guaranteeCar?content=" +
                    res.data.content,
                });
              }
            }
          });
          break;
        }
      }
    },
    addressBtn(address) {
      this.$utils.toastDebug("点击选择城市   " + address);
    },
    searchBtn(content) {
      this.$utils.toastDebug("点击搜索按钮 input输入的内容：   " + content);
    },
	searchClick(){
		const value = uni.getStorageSync('login')
		if (!value) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return
		}
	  uni.navigateTo({
		url: "/main/home/index/homeSearch",
	  });
	},
    swiperClick(item) {
      this.$utils.log("点击了swiperitem " + JSON.stringify(item));
      if ((item.url != null) & (item.url != "") & (item.url != undefined)) {
        uni.navigateTo({
          url: item.url,
        });
      }
    },

    promotionClick(item) {
      if (item.state == 2) {
        uni.navigateTo({
          url:
            "/pages/home/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=" +
            item.source_id,
        });
      } else {
        uni.showModal({
          title: "新车暂未开放",
          icon: "none",
          duration: 3000,
        });
      }
    },
  },
};
</script>

<style>
.line {
  width: 676rpx;
  background-color: #eee;
  height: 2rpx;
  margin-top: 18rpx;
}

.msg-image-class {
  width: 100%;
  height: 280rpx;
  background: #f2f2f2;
  opacity: 1;
  border-radius: 20rpx;
  margin-top: 38rpx;
}

.msg-content-class {
  /* width: 672rpx; */
  height: auto;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #000026;
  opacity: 1;
  margin-top: 26rpx;
}

.msg-view-box {
  width: 75px;
  background: url(@/static/bac-small.png);
  background-size: 100% 100%;
}

.height100 {
  height: 150rpx;
  /* width: 750rpx; */
  width: 100%;
}

.pad28 {
  /* padding: 0rpx 28rpx; */
}

.message-text-title {
  width: 140rpx;
  font-size: 30rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #000026;
  opacity: 1;
  margin-left: 2rpx;
}

.swiper-mark-view-num {
  font-size: 20rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #ffffff;
  opacity: 1;
}

.swiper-mark-view-index {
  font-size: 20rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #fbaa09;
  opacity: 1;
}

.swiper-mark-view-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 6rpx;
}

.swiper-text-item-bottom {
  margin-bottom: 20px;
  font: Alimama ShuHeiTi;
  font-size: 10px;
  color: #666666;
}

.swiper-view-item-box-bottom {
  margin-top: 8px;
  width: 366rpx;
  height: auto;
  opacity: 1;
}

.swiper-text-top {
  font-size: 15px;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #333333;
}

.swiper-text-top__tag {
  font-family: Source Han Sans CN;
  font-size: 9px;
  color: #ffffff;
  background-color: #ff6d34;
  border-radius: 6px;
  margin-left: 5px;
  text-align: center;
  padding: 2px 8px 2px 8px;
}

.swiper-view-top {
  /* width: 366rpx; */
  /* height: 86rpx; */
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.swiper_box_banner_box {
  /* background: linear-gradient(to bottom, #4E6ECC, #FFFFFF); */
  opacity: 1;
  height: 220rpx;
  border-radius: 20rpx;
  width: 100%;
}

.swiper_box_2 {
  /* width: 366rpx; */
  /* height: 152rpx; */
  /* padding-bottom: 20px; */
}

.line-5 {
  height: 10px;
  background: #f5f5f5;
  opacity: 1;
}

.page-wraper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}

.header-class {
  width: 100%;
  height: auto;
  display: flex;
  background-color: #4e6ecc;
  justify-content: center;
  align-items: center;
}

.address-view-class {
  margin-left: 10rpx;
}

.address-text {
  font-size: 28rpx;
  color: #fefefe;
  margin: 8rpx;
}

.inputView {
  flex: 4;
  margin: 10rpx;
}

.inputClass {
  background-color: #fefefe;
  margin: 10rpx;
  padding: 10rpx;
  border-radius: 50rpx;
  font-family: uniicons;
  text-decoration: none;
}

.contentViewBox {
  /* width: 100%; */
  height: auto;
  /* 父元素设置相对定位 */
  position: relative;
}

.swiperImageViewClass {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  z-index: 1;
  text-align: center;
}
.imageSwiperClass {
  background: #ffffff;
  opacity: 1;
  width: 100%;
  height: 220rpx;
  border-radius: 20rpx;
  /* margin-left: 10px; */
  /* margin-right: 10px; */
}

.swiper-item-absolute {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  top: 64rpx;
  left: 28rpx;
  z-index: 1;
}

.swiper-item-text {
  font-size: 52rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  line-height: 0rpx;
  color: #ffffff;
}

.view-box {
  margin-top: 36rpx;
  display: flex;
}

.view-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-item-imgae {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-item-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  width: 220px;
  height: auto;
  /* height: 326rpx; */
  /* background: linear-gradient(to bottom right, #737373, #9FA0A7); */
  background-color: #ffffff;
  opacity: 1;
  border-radius: 12px;
}

.view-item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 326rpx; */
  /* 父元素设置相对定位 */
  position: relative;
  margin-left: 14px;
}

.view-item-right__card {
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  display: flex;
  align-items: center;
}

.view-item-right__card__text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.view-item-right__card__image {
  width: 60rpx;
  height: 50rpx;
  margin-right: 10px;
}

.view-item-right__card__text__title {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
}

.view-item-right__card__text__subTitle {
  margin-top: 5px;
  text-align: left;
  font: Alimama ShuHeiTi;
  font-size: 12px;
  color: #666666;
}

.xincheViewClass {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 316rpx;
  height: 138rpx;
  background: #e6edfd;
  opacity: 1;
  border-radius: 28rpx;
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  top: 0;
  z-index: 1;
}

.xincheText {
  font-size: 32rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  line-height: 0rpx;
  color: #0e59ea;
  opacity: 1;
  margin-left: 38rpx;
}

.kuaibao-ershou-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  bottom: 0;
  z-index: 1;
}

.kuaibaoView {
  display: flex;
  justify-content: space-between;
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  bottom: 0;
  z-index: 1;
  width: 150rpx;
  height: 150rpx;
  background: #f7f1fe;
  opacity: 1;
  border-radius: 28rpx;
  display: flex;
  justify-content: center;
  /* 父元素设置相对定位 */
  position: relative;
}

.ershoucheView {
  display: flex;
  justify-content: space-between;
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  bottom: 0;
  z-index: 1;
  width: 150rpx;
  height: 150rpx;
  background: #95dcdd28;
  border-radius: 28rpx;
  margin-left: 16rpx;
  display: flex;
  justify-content: center;
  /* 父元素设置相对定位 */
  position: relative;
}

.kuaibao-ershou-image {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘  */
  bottom: 102rpx;
  z-index: 1;
  text-align: center;
}

.kuaibao-image {
  width: 63.47rpx;
  height: 66.96rpx;
}

.ershouche-image {
  width: 85.54rpx;
  height: 68.96rpx;
}

.kuaibaoText {
  font-size: 32rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #954df0;
  opacity: 1;
  margin-top: 70rpx;
}

.ershoucheText {
  font-size: 32rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #39bdbf;
  opacity: 1;
  margin-top: 70rpx;
}

.view-img {
  width: 60rpx;
  height: 60rpx;
}

.view-text {
  margin-top: 8px;
  font-size: 26rpx;
  font-family: PingFangSC-Regular;
  color: #000026;
  opacity: 1;
}

.view-da-img {
  width: 100%;
  height: 360rpx;
}

.ms-box {
  text-align: left;
  background-color: #ffffff;
  /* margin: 0px 14px 0px 14px; */
  border-radius: 10px;
  margin-top: 10px;
  padding: 14px;
}

.ms-box__view {
  /* margin: 10px 14px 10px 14px ; */
  /* padding-top: 5px; */
  width: auto;
  height: atuo;
}

.ms-title {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
}

.ms-content {
  margin-top: 20rpx;
  font-size: 28rpx;
}

.ms-image {
  width: 100%;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.content-view {
  margin-top: 15px;
  margin-right: 5px;
  margin-left: 5px;
  /* margin: 14px; */
}

.background {
  width: 100%;
  height: 100vh;
  /* 父元素设置相对定位 */
  position: relative;
  background-color: #f5f5f5;
}
</style>